<!--分类页详情页-->
<template>
  <div class="menu-detail">
    <div class="banner-frame" v-if="menuIndex == 1 && menuInfo.banner">
      <van-image fit="cover" class="banner" lazy-load :src="menuInfo.banner" />
      <!-- <van-image
        v-if="!isMobile"
        fit="cover"
        class="banner"
        lazy-load
        :src="menuInfo.banner"
      />
      <van-image
        v-else
        fit="cover"
        class="mobaner"
        lazy-load
        :src="menuInfo.banner + '?x-oss-process=image/resize,w_450'"
      /> -->
    </div>
    <div class="container nav-frame">
      <div class="title-frame">
        <h1 class="title" v-if="menuInfo.title">{{ pageTitle }}</h1>
      </div>
      <div class="desc-frame" v-if="menuInfo.description">
        <p v-html="menuInfo.description"></p>
      </div>
      <div class="nav-panel" v-if="navList.length != 0">
        <div
          class="nav-past"
          style="padding-left: 0; font-style: italic"
          @click="clickAll"
        >
          <div
            class="icon-frame"
            style="background: #323233; width: 2.6rem; height: 2.6rem"
          >
            <span>ALL</span>
          </div>
          <span>VIEW ALL</span>
          <div class="tips">
            <van-icon name="play" v-if="showAll" />
          </div>
        </div>
        <div class="nav-fast" ref="pageNav">
          <div
            class="nav-past ac-bg"
            v-for="(item, index) in navList"
            :key="'nav' + index"
            :ref="'nav' + index"
            @click="clickNav(index)"
            :id="'nav' + index"
          >
            <div class="icon-frame">
              <img class="img-icon" v-if="item.icon" :src="item.icon" />
              <van-icon v-else name="apps-o" size="1.4rem" color="#888" />
            </div>
            <span>{{ item.title }}</span>
            <div class="tips">
              <van-icon name="play" v-if="navindex == index && !showAll" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="product-frame">
      <ProduList
        :productList="productList"
        :page="form.page"
        :pageSize="form.page_size"
        :total="proTotal"
        @pageChange="pageChange"
        @clickProduct="clickProduct"
        :loading="loading"
      />
    </div>
  </div>
</template>
<script>
import menu from "./menu.js";
export default {
  mixins: [menu.mixin],
};
</script>
<style lang="less" scoped>
@import "./menudetail.less";
</style>